<template>
	<view>
		<view class="con_top">
			<view class="t1">
				{{ info.type == 'video' ? '出货方交货' : '收货方打款' }}
			</view>
			<view class="t2">
				{{ info.type == 'video' ? '请核对收货方信息，尽快交易并录制交易视频' : '请确认对方联系信息及收款信息' }}
			</view>
		</view>
		<view class="infos" v-if="info.type == 'video'">
			<view class="infos_t">
				<image src="/static/trad/t4.png" mode=""></image>
				<view class="">收货方信息</view>
			</view>
			<view class="ttt">
				<view class="tt1 u-flex">
					<view class="">
						{{ info.gameZone }}
					</view>
					<view class="" style="margin-left: 40rpx">
						{{ info.account }}
					</view>
				</view>
				<view class="tt2">
					微信号
					<span style="margin-left: 15rpx">{{ info.wechat }}</span>
				</view>
				<view class="tt2">
					手机号
					<span style="margin-left: 15rpx">{{ info.phone }}</span>
				</view>
				<view class="btn" @click="copy">一键复制</view>
			</view>
		</view>
		<view class="infos" v-if="info.type == 'img'">
			<view class="infos_t" v-if="info.paymentType == 1">
				<image src="/static/trad/t1.png" mode=""></image>
				<view class="">请打款至银行卡</view>
			</view>
			<view class="infos_t" v-if="info.paymentType == 2">
				<image src="/static/trad/t3.png" mode=""></image>
				<view class="">请打款至支付宝</view>
			</view>
			<view class="infos_t" v-if="info.paymentType == 3">
				<image src="/static/trad/t2.png" mode=""></image>
				<view class="">请打款至微信</view>
			</view>
			<view class="ttt">
				<view class="tt1 u-flex">
					<view class="">
						{{ info.paymentName }}
					</view>
					<view class="" style="margin-left: 40rpx">
						{{ info.paymentAccount }}
					</view>
				</view>
				<view class="tt2" v-if="info.paymentType == 1">
					{{ info.paymentBank }}
					<span style="margin-left: 15rpx">{{ info.paymentBankChild }}</span>
				</view>
				<view class="btn" @click="copy">一键复制</view>
			</view>
		</view>
		<view class="userinfo">
			<view class="item u-flex u-row-between">
				<view class="">大区名称</view>
				<view class="">{{ info.gameZone }}</view>
			</view>
			<view class="item u-flex u-row-between">
				<view class="">角色ID</view>
				<view class="">{{ info.account }}</view>
			</view>
			<view class="item u-flex u-row-between">
				<view class="">微信号</view>
				<view class="">{{ info.wechat }}</view>
			</view>
			<view class="item u-flex u-row-between">
				<view class="">手机号</view>
				<view class="">{{ info.phone }}</view>
			</view>
		</view>
		<view class="uplaods">
			<view class="tit u-flex u-row-between">
				<view class="" v-if="info.type == 'img'">
					打款凭证
					<span>(上传打款图片 避免纠纷)</span>
				</view>
				<view class="" v-if="info.type == 'video'">
					交货视频
					<span>(上传交货视频 避免纠纷)</span>
				</view>
				<view class="btn" v-if="info.uptype == 'handle' && info.file" @click="uploadImg">重新上传</view>
			</view>
			<view class="up" v-if="info.file">
				<image @click="$previewImage([info.file])" v-if="info.type == 'img'" :src="info.file" mode="aspectFit" class="img"></image>
				<video v-if="info.type == 'video'" :src="info.file" class="videos"></video>
			</view>
			<view class="up" v-if="info.uptype == 'handle' && !info.file">
				<view class="upload" @click="uploadImg">
					<view class="">
						<image src="/static/trad/jj.png" mode=""></image>
						<view class="">
							{{ info.type == 'video' ? '请上传/拍摄交货视频' : '请上传打款凭证' }}
						</view>
					</view>
				</view>
			</view>
			<view class="btnss" v-if="info.uptype == 'handle'" @click="submit" :class="{ on: isOn }">确认提交</view>
		</view>

		<view class="shuoming">
			<image v-if="info.type == 'img'" class="img1" src="/static/trad/dd.png" mode=""></image>
			<image v-if="info.type == 'video'" class="img2" src="/static/trad/kk.png" mode=""></image>
			<view v-if="info.type == 'video'" class="" v-html="info.safeOrderFile"></view>
			<view v-if="info.type == 'img'" class="" v-html="info.safeOrderFilePay"></view>
		</view>
	</view>
</template>

<script>
import { setupload } from '@/common/http.api.js';
export default {
	data() {
		return {
			info: {}
		};
	},
	onLoad(option) {
		this.info = uni.getStorageSync('setupload');
		console.log(this.info);
		uni.setNavigationBarTitle({
			title: this.info.type == 'video' ? '交货视频' : '打款凭证'
		});
	},
	methods: {
		copy() {
			let data = '';
			if (this.info.type == 'video') {
				data = `${this.info.gameZone} ${this.info.account}\n微信号 ${this.info.wechat} \n手机号 ${this.info.phone}`;
			} else {
				if (this.info.paymentType == 1) {
					data = `${this.info.paymentName} ${this.info.paymentAccount}\n${this.info.paymentBank} ${this.info.paymentBankChild}`;
				} else {
					data = `${this.info.paymentName} ${this.info.paymentAccount}`;
				}
			}
			uni.setClipboardData({
				data, // 要复制的内容
				success: () => {
					// 复制成功回调
					uni.showToast({
						title: '已复制',
						icon: 'success'
					});
				}
			});
			console.log('11111111111');
		},
		submit() {
			if (this.info.file == null) {
				this.$modal.msg('请上传凭证');
				return;
			}
			setupload(this.info).then((res) => {
				if (res.code == 200) {
					this.$modal.msg('完成填写');
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				}
			});
		},
		uploadImg() {
			let that = this;
			if (that.info.type == 'img') {
				this.$uploadone().then((res) => {
					that.info.file = res;
				});
			} else {
				uni.chooseVideo({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						console.log(res);
						let tempFilePath = res.tempFilePath;
						let header = {
							token: uni.getStorageSync('userToken') || '',
							'content-type': 'application/x-www-form-urlencoded'
						};
						uni.showLoading({
							title: '上传中...'
						});
						const BASEURL = getApp().globalData.BASEURL;
						uni.uploadFile({
							url: BASEURL + '/api/aliyun/oss/upload',
							filePath: tempFilePath,
							name: 'file',
							header: header,
							success: (res1) => {
								let data = JSON.parse(res1.data);
								if (res1.statusCode == 200 && data.code == 200) {
									that.info.file = data.url;
									console.log(this.info);
									uni.hideLoading();
								} else {
									uni.showToast({
										title: res1.data.msg,
										icon: 'none',
										duration: 1500
									});
								}
							}
						});
					},
					fail: (err) => {}
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}

.con_top {
	margin-top: 40rpx;
	text-align: center;

	.t1 {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
	}

	.t2 {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #fe1515;
		margin-top: 14rpx;
	}
}

.infos {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;

	.infos_t {
		width: 710rpx;
		height: 96rpx;
		background: linear-gradient(360deg, #ffffff 0%, rgba(255, 231, 213, 0.53) 100%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		padding: 35rpx 26rpx 10rpx 26rpx;
		box-sizing: border-box;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 15rpx;
		}

		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #ff6f07;
	}

	.ttt {
		padding: 12rpx 30rpx;

		.tt1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
		}

		.tt2 {
			margin-top: 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}

		.btn {
			width: 488rpx;
			height: 80rpx;
			background: #f4f4f4;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			text-align: center;
			line-height: 80rpx;
			margin: 24rpx auto;
		}
	}
}

.userinfo {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 1rpx 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;

	.item {
		width: 100%;
		margin: 44rpx auto;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #11192d;
	}
}

.uplaods {
	width: 710rpx;
	margin: 20rpx auto;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 34rpx 20rpx 10rpx 20rpx;
	box-sizing: border-box;

	.tit {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;

		span {
			color: #d1d1d6;
			margin-left: 15rpx;
		}

		.btn {
			width: 140rpx;
			height: 56rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1px solid #ff6f07;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #ff6f07;
			text-align: center;
			line-height: 56rpx;
		}
	}

	.up {
		margin: 20rpx auto;

		.upload {
			width: 100%;
			height: 424rpx;
			background: #fff;
			background: #f0f0f0;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			text-align: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.imgs {
			width: 670rpx;
		}

		.videos {
			width: 670rpx;
			height: 500rpx;
		}
	}

	.btnss {
		width: 670rpx;
		height: 100rpx;
		border-radius: 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		line-height: 100rpx;
		text-align: center;
		background: linear-gradient(270deg, #ff6f07 0%, #ffa666 100%);
		color: #fff;
		margin: 20rpx auto;
	}

	.on {
		opacity: 0.54 !important;
	}
}

.shuoming {
	width: 710rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin: 20rpx auto;
	padding: 42rpx 20rpx;
	box-sizing: border-box;

	.img1 {
		width: 182rpx;
		height: 40rpx;
	}

	.img2 {
		width: 246rpx;
		height: 40rpx;
	}
}
</style>
